<template>
  <div>
     <!-- 面包屑导航 -->
     <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/shop/list' }">
        <i class="el-icon-present"></i> 
        商品管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>商品组</el-breadcrumb-item>
    </el-breadcrumb>

    <div id="all">
      <!-- 搜索 -->
      <div id="sou">
        <span>商品组名称</span>
        <el-input v-model="input" placeholder="输入商品组名称" style="width:200px"></el-input>
        <el-button type="primary"  icon="el-icon-search" @click="sou">查询</el-button>
      </div>
      <!-- 添加或批量删除 -->
      <div id="addhdel">
          <router-Link to="/shop/groupadd/0" style="color:#fff;text-decoration: none;"><el-button type="warning"  icon="el-icon-plus" style="width:150px;height:40px;">添加商品</el-button></router-Link>
        <el-button type="danger"  icon="el-icon-delete" style="width:150px;height:40px;margin-left: 10px;">批量删除</el-button>
      </div>
      <!-- 数据 -->
      <div id="list">
        <!-- 表格 -->
        <div id="right">
          <div>
            <span>每页显示</span>
            <el-select v-model="value" placeholder="请选择" size="mini" @change='tiao'>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div>
            <el-table
              ref="multipleTable"
              :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              tooltip-effect="dark"
              style="width: 100%">
              <el-table-column
                type="selection"
                align="center"
                width="55">
              </el-table-column>
              <el-table-column
                align="left"
                prop="name"
                label="商品组名称"
                width="1080">
              </el-table-column>
              <el-table-column
                align="center"
                prop="type"
                label="状态"
                width="105">
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                width="260">
                <template slot-scope="scope">
                  <el-button type="warning" v-if="scope.row.type=='启用'" @click="jin(scope.row.id)">禁用</el-button>
                  <el-button type="success" v-else @click="qi(scope.row.id)">启用</el-button>
                  <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row.id)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" @click="shan(scope.row.id)"></el-button>
                </template>
              </el-table-column>
              
            </el-table>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <footer>
        <div style="width: 10%;"></div>
        <div id="fen">
            <div>第{{currentPage}}页&nbsp;共{{Math.ceil( total/pageSize) }}页&nbsp;共{{list.length}}条</div>
            <div>
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  layout=" prev, pager, next, jumper"
                  :total='total'>
                </el-pagination>
            </div>
        </div>
      </footer>
    </div>
  </div>
</template>
<script>
import { deletezwyGroupListDel, getzwyGroupList, putzwyGroupListUpdate } from '@/utils/api'
export default{
  data(){
    return {
      input: '',
      value1: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      options: [{
        value: '2',
        label: '2条'
      }, {
        value: '4',
        label: '4条'
      }, {
        value: '6',
        label: '6条'
      }, {
        value: '8',
        label: '8条'
      }],
      value: '',
      currentPage: 1,
      list:[],
      pageSize:8,
      total:0,
      data:[]
    }
  },
  methods:{
    time(val){
      this.tim = val
    },
    sou(){
      console.log(this.input);
      if(this.input!=''){
        let a = this.data.filter(item=>{
          return item.name == this.input
        })
        if(a.length!=0){
            this.list=a
            this.total = a.length
            this.$forceUpdate()
          }else{
            this.list = []
              this.$notify({
              title: '提示',
              message: '请输入你要搜索的正确名字',
              duration: 2000
            });
          }
      console.log(a);
      }else{
        this.$notify({
          title: '提示',
          message: '请输入你要搜索的内容',
          duration: 2000
        });
      }
      
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`);
    },
    tiao(val){
      this.pageSize=Number(val)
    },
    shan(e){
      var that = e
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletezwyGroupListDel(that)
        this.$router.go(0)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      })
    },
    qi(e){
      console.log(e);
      putzwyGroupListUpdate({type:'启用' ,id:e})
      this.$router.go(0)
    },
    jin(e){
      console.log(e);
      putzwyGroupListUpdate({type:'禁用' ,id:e})
      this.$router.go(0)
    },
    edit(e){
      this.$router.push('/shop/groupadd/'+e)
    },
  },
  created(){
    getzwyGroupList().then(res=>{
      this.list = res.data.data
      this.data = res.data.data
      this.total = res.data.data.length
    })
  },
}
</script>
<style scoped>
#all{
  width: 100%;
  height: 100%;
}
#sou{
  width: 40%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
#sou span{
  font-weight: bold;
}
#addhdel{
  width: 100%;
  height: 60px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #dcd9d9;
  display: flex;
  align-items: center;
  margin-bottom:10px ;
}
#list{
  width: 100%;
  height: 100%;
  display: flex;

}
#right{
  width: 100%;
  height: 657px;
  border: 1px solid #dcd9d9;
  margin: 1px;
  display: flex;
  flex-direction: column;
}
#right div {
  padding: 2px;
}
#right div span {
  font-size:10px ;
}
footer{
  width: 100%;
  height: 55px;
  display: flex;
}
#fen{
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}
</style>